define(function(require, exports, module) {
	require('avalon2'); 
    var procinstViewTpl=require('resources/template/workflow/procinstView_tpl.html');
    require('resources/js/jquery.dataTables.min.js');
    require('resources/js/jquery.dataTables.bootstrap.js');
    require('resources/js/jquery.dataTables.buttons.js');
    require('resources/js/jquery.json-2.4.min.js');
    require('resources/js/jquery.gritter.min.js');
    var DTConstant=require('resources/template/common/DTConstant.js');
    var ACEConstant=require('resources/template/common/ACEConstant.js');

    var ProcinstView=function($container,config,data,parent){
        this.getUrl=Common.getUrl.bind(this);
        this.config=$.extend({},ProcinstView.DEFAULT,config);
        this.data=data;
        this.parent=parent;
        this.$container=$container;
        this.$div=$(procinstViewTpl).prependTo(this.$container);
        
        this.procinstId=this.config.procinstId;
        var that=this;
        this.init();
    };
    
    $.fn.outerHTML = function () {
        // IE, Chrome & Safari will comply with the non-standard outerHTML, all others (FF) will have a fall-back for cloning
        return (!this.length) ? this : (this[0].outerHTML ||
            (function (el) {
                var div = document.createElement('div');
                div.appendChild(el.cloneNode(true));
                var contents = div.innerHTML;
                div = null;
                return contents;
            })(this[0]));
    };
    
    ProcinstView.prototype={
        urls:{
        	traceImg:'/procinst/trace/image.jhtml?procinstId=',
        	traceInfo:'/procinst/trace/info.jhtml?procinstId=',
        	procinstInfo:'/procinst/info.jhtml?procinstId='
        },  
        init:function(){
        	var that=this;
        	var traceImgDeferred = $.Deferred();
        	var traceInfoDferred = $.Deferred();
        	
        	this.$traceImg=$('.traceImg',this.$div);
        	this.$traceImg.on('load',function(){
        		traceImgDeferred.resolve();
        	});
        	this.$traceImg.attr('src',this.getUrl('traceImg')+this.procinstId);
        	this.bind();
        	
        	$.ajax(this.getUrl('traceInfo')+this.procinstId,{
    			type:'POST',
    			dataType:'json'
    		}).done(function(data){
    			that.traceInfo=data;
    			traceInfoDferred.resolve();
    		}).fail(function(data){
    			that.traceInfo=undefined;
    		});
        	$.ajax(this.getUrl('procinstInfo')+this.procinstId,{
    			type:'POST',
    			dataType:'json'
    		}).done(function(data){
    			that.procinstInfo=data;
    			that.fillProcinstInfo();
    		}).fail(function(data){
    			that.procinstInfo=undefined;
    		});
        	
        	$.when(traceImgDeferred,traceInfoDferred).done(function(){
				that.fillTraceInfo();
			});
        },
        fillTraceInfo:function(){
        	if(!this.traceInfo)
        		return;
        	
        	var positionHtml = "",infos=this.traceInfo;
            var diagramPositon = this.$traceImg.position(),
            	left=diagramPositon.left,top=diagramPositon.top;
            var varsArray = new Array();
            $.each(infos, function (i, v) {
                var $positionDiv = $('<div/>', {
                    'class': 'activity-attr'
                }).css({
                        position: 'absolute',
                        left: v.x - 1+left,
                        top: v.y - 1+top,
                        width: v.width + 1,
                        height: v.height + 1,
                        backgroundColor: 'black',
                        opacity: 0
                    });

                // 节点边框
                var $border = $('<div />', {
                    'class': 'activity-attr-border'
                }).css({
                        position: 'absolute',
                        left: v.x - 1+left,
                        top: v.y - 1+top,
                        width: v.width + 1,
                        height: v.height + 1
                    });

                positionHtml += $positionDiv.outerHTML() + $border.outerHTML();
                varsArray[varsArray.length] = v.vars;
            });

            $(positionHtml).appendTo($('.well',this.$div)).find('.activity-attr-border');

            // 鼠标移动到活动上提示
            $('.activity-attr-border').each(function (i, v) {
            	var tipContent='';
                $.each(varsArray[i], function(varKey, varValue) {
                    if (varValue) {
                        tipContent += "<ul style='text-align:left;padding:10px 10px 0 0px;'><li class=\"muted\">" + varKey + "：" + varValue + "</li></ul>";
                    }
                });
                $(this).data('vars', varsArray[i])
                	.data('toggle', 'tooltip').data('placement', 'bottom').attr('title', tipContent);
            }).tooltip({html:true});//bootstrap的tooltip
        },
        fillProcinstInfo:function(){
        	this.$vmId='procinstInfo';//很重要，不写会内存泄露
        	this.procinstInfoVM= avalon.define({
                $id: "procinstInfo",
                data:this.procinstInfo,
                recordTitle:function(str,len){
                	return str.length>len?str:'';
                },
                recordText:function(str,len){
                	return str.length>len?str.substr(0,len)+'...':str;
                }
            });
			avalon.scan(this.$div.get(0),this.procinstInfoVM);
        },
        bind:function(){
        	var that=this;
        	$('.btn-back',this.$div).css('display',this.config.hasParentPage?'block':'none')
        				.click(function(){that.parent.toParentPage();});
        },
        destroy:function(){
			this.$div.remove();
			this.$vmId&&delete avalon.vmodels[this.$vmId];
		}
	}
	
    ProcinstView.DEFAULT={
			
	};
    
    return ProcinstView;
});
        